<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background: aqua;
    }
    div {
      width: 400px;
      height: 500px;
      /*background-image: url(../image/l.jpg);*/
      background: pink url(../image/l.jpg) no-repeat;
      /*  我们插入的图片img 直接通过 width 和 heigth 设置就可以*/
      /*  背景图片设置大小 background-size */
      /*  background-size: 100px; 我们尽量只改一个值，防止缩放失真扭曲*/
      /*   background-size: 50%; 把背景图片缩放为原来的一半大小*/
      /*background-size: cover;*/
    /*  图片会自动缩放比例，保证图片始终填充满背景区域，如果有益处部分则会被隐蔽。
     图片进行等比例缩放 图片一定要保证宽度和高度同时满足盒子的大小
     势必会有部分超出去，就看不见了 我们平时用的cover 最多*/
      background-size: contain;
    /*  图片会自动调整缩放比例，保证图片始终完整显示在背景区域。
     图片进行等比例缩放 如果图片的高度或者宽度  有一个和盒子一样大了，就不在缩放，这样的好处就是保证了图片的完整。
     不会有缺失的一部分*/
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>
